<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>复杂的内容加上自定义的导航条</title>
    <script src="../../jquery.js"></script>
    <script src="../../ui/om-core.js"></script>
    <script src="../../ui/om-slider.js"></script>
    <link rel="stylesheet" href="../../themes/default/om-slider.css" />
    <link rel="stylesheet" href="css/complex-content.css" />
    <link rel="stylesheet" type="text/css" href="../common/css/demo.css" />
    <!-- view_source_begin -->
    <style type="text/css">
    .slider-demo {
    	height: 188px;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#slider').omSlider({
                controlNav: '#m-nav',
                activeNavCls: 'curr',
                effect: 'slide-v',
                autoPlay: false,
                delay:200
            });
        }); 
    </script>
    <!-- view_source_end -->
</head>
<body>
	<!-- view_source_begin -->
	<div class="m" id="madding">
		<div class="mt">
			<h2>疯狂抢购</h2>
			<ul id="m-nav" class="tab" style="display: block;">
				<li class="">1</li>
				<li class="">2</li>
				<li class="">3</li>
				<li class="">4</li>
			</ul>
			<div class="extra"></div>
		</div>
		<div class="slider-demo list-h" id="slider">
			<div class="tabcon list-h">
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j1.jpg"></a>
						<div class="p-price">￥269.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">乐扣乐扣保鲜盒15+1件套，全明星组合，直降200元，满499再减100元！</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j2.jpg"></a>
						<div class="p-price">￥109.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">LOREAL PARIS巴黎欧莱雅创世新肌源洁面膏 100ml</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j3.jpg"></a>
						<div class="p-price">￥109.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">奥莱克超薄时尚USB功能DVD影碟机</a>
					</dd>
				</dl>
			</div>
			<div class="tabcon list-h">
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j4.jpg"></a>
						<div class="p-price">￥1888.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">三星MV800【翻转屏&amp;多角度随意拍】潮到你尖叫！送价值499元大礼包！</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j5.jpg"></a>
						<div class="p-price">￥1499.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">联想 乐phone 
						W100 惊爆抄底价，再送原装电池+座充！</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j6.jpg"></a>
						<div class="p-price">￥2788.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">合资32英寸LED
							绝对震憾！疯抢一天！每个帐号限购1台！</a>
					</dd>
				</dl>
			</div>
			<div class="tabcon list-h">
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j7.jpg"></a>
						<div class="p-price">￥109.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">Mamonde梦妆多效BB矿物修容霜40ml-清爽型</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j8.jpg"></a>
						<div class="p-price">￥21399.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">佳能 EOS 5D
							单反套机 无敌兔！一镜走天下，打遍天下无敌手！</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j9.jpg"></a>
						<div class="p-price">￥1089.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">联想DP600+针式打印机，超级特价抢购！限时限量！</a>
					</dd>
				</dl>
			</div>
			<div class="tabcon list-h">
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j10.jpg"></a>
						<div class="p-price">￥3690.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">老板（Robam）
							吸油烟机CXW-200-8008N</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j11.jpg"></a>
						<div class="p-price">￥499.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">【三星ST30】
							锂电&amp;广角，499元疯抢！京东独家！当下无敌给力型号！</a>
					</dd>
				</dl>
				<dl>
					<dt class="p-img">
						<a href="#"><img src="images/complex-content/j12.jpg"></a>
						<div class="p-price">￥49.00</div>
					</dt>
					<dd class="p-name">
						<a href="#">苏打绿：你在烦恼什么（预购版）（CD）</a>
					</dd>
				</dl>
			</div>
		</div>
	</div>
	<!-- view_source_end -->
	<div id="view-desc">
	    <p>完全自定义slider的面板和导航条。面板不再是简单的img或者a标签，而是用div包裹的复杂内容；另外，导航条的HTML和样式也是自己编写定义的。<br/>
            以此类推，使用slider可以做出内容丰富，导航风格多变的滑动器。
        </p>
	</div>
    <script type="text/javascript" src="../common/js/themeloader.js"></script>
</body>
</html>